<script setup lang="ts">
import Carousel from '../components/Carousel.vue'
import Cates from '../components/Cates.vue'
import NewsList from '../components/NewsList.vue'
import { reactive, inject, onMounted } from 'vue';
import type { Cate } from '../types/types.d.ts'
import getArticleList from '@/api/getArticleList'
import { userinfo } from '@/stores/counter';

const user = userinfo()
const cates = inject('cates') as Cate[]
const { allList } = getArticleList();

onMounted(() => {
  if (user.pages.home.list.length == 0)
    allList();
})
</script>

<template>
  <div class="home-div">
    <div class="home-carousel">
      <Carousel />
    </div>
    <div class="home-cates">
      <Cates :data="cates" />
    </div>
    <div class="home-newp">
      <NewsList />
    </div>
  </div>
</template>

<style scoped>
.home-div {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home-menu {
  display: flex;
}

.home-carousel {
  display: flex;
  /* height: 1050px; */
  height: 600px;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.home-cates {
  display: flex;
  width: 100%;
}

.home-newp {
  display: flex;
  width: 100%;
}
</style>
